<template>
  <nav>
    <Logo />
    <div class="nav-menu">
      <router-link to="/" :class="{ active: $route.path === '/' }">首页</router-link>
      <router-link to="/chat" :class="{ active: $route.path === '/chat' }">对话</router-link>
      <router-link to="/agentRequest" :class="{ active: $route.path === '/agentRequest' }">测试</router-link>
      <router-link to="/about" :class="{ active: $route.path === '/about' }">关于</router-link>
    </div>
  </nav>
</template>

<script setup>
import { useRoute } from 'vue-router';
import Logo from './Logo.vue';

const route = useRoute();
</script>

<style scoped>
nav {
  background-color: #333;
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  padding: 0;
  position: relative;
  margin: 0;
}

.nav-menu {
  display: flex;
  gap: 20px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  transition: color 0.3s ease;
}

nav a:hover {
  color: #ff9800;
}

nav a.active {
  color: #ff9800;
  font-weight: bold;
}
</style>
